<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>article inner</title>
<link rel="stylesheet" href="/networkforum/css/article_right.css" />
<!–[if lt IE9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
<script type="text/javascript">
window.onload = function(){
	var articleId = window.parent.document.getElementById("articleId").value;
	
	//登录页面后通过myajax获取进一步的信息
	var myajax = getByAjax();
	myajax.init(null,"get",true);
	myajax.get("/networkforum/article/article_content_init.do?articleId="+articleId,contentInit);
	myajax = null;
}
function contentInit(d){
	//var data = eval("("+d+")");
	var data = toJson(d);
	articleInfo(data.articleInfo);
	get("publishTime").innerHTML =data.publishTime;
	get("articleGroup").innerHTML ="分类: "+data.articleGroup;
	var previous = data.previous;
	var next = data.next;
	if(previous){
		var before = get("before");
		before.innerHTML = "上一篇： "+previous.articleName;
		before.articleId = previous.articleId;
	}
	if(next){
		var nn = get("next");
		nn.innerHTML = "下一篇： "+next.articleName;
		nn.articleId = next.articleId;
	}
	
	document.getElementById("before").value = data.beforeArticle;
	document.getElementById("next").value = data.nextArticle;
	
	visitorInfo(data.visitor);
	replyInfo(data.replys);
	//activeInfo().addNode(data.replys);
	//hotUserInfo(data.hotUserInfo);
	window.parent.iFrameHeight("rightIframe");
}
function otherHandle(event){
	event = event || window.event;
	var target = event.target;
	if(!target.articleId){
		return;
	}
	var articleId = window.parent.document.getElementById("articleId");
	articleId.value = target.articleId;
	//var url = "/networkforum/pages/article/article_content.html";
	//window.parent.document.getElementById("rightIframe").src = url;
	location.reload();
}
function articleInfo(data){
	get("articleTitle").innerHTML =data.articleName;
	get("visitTime").innerHTML =data.visitTimes+"人阅读";
	get("replyTime").innerHTML ="评论("+data.reviewTimes+")";
	var keyWords = get("keyWords");
	var words = data.articleKeyWords.split('，');
	for(var i =0;i<words.length;i++){
		var label = document.createElement("label");
		label.innerHTML = words[i];
		keyWords.appendChild(label);
	}
	
	get("articleContent").innerHTML =data.articleContents;
}
function visitorInfo(data){
	var visitor = get("visitorInner");
	if(data == null || data == ""){
		var label = document.createElement("label");
		label.innerHTML = "暂无访问者!";
		with(label.style){
			color = "red";
		}
		visitor.appendChild(label);
		
		return;
	}
	var frag = document.createDocumentFragment();
	for(var i =0;i<data.length;i++){
		var d = data[i];
		var li = document.createElement("li");
		var img = document.createElement("img");
		var name = document.createElement("label");
		var time = document.createElement("label");

		//img.src = d.userPhoto;
		reloadPicture(img,d.userPhoto);
		img.userId = d.userId;
		name.innerHTML = d.userName;
		time.innerHTML = d.visitDate;
		
		li.appendChild(img);
		li.appendChild(name);
		li.appendChild(time);

		frag.appendChild(li);
	}
	visitor.appendChild(frag);
}
function replyInfo(data){
	var replyInner = document.getElementById("replyInner");
	if(data == null || data == ""){
		var label = document.createElement("label");
		label.id = "noReply";
		label.innerHTML = "暂无评论!";
		with(label.style){
			color = "red";
		}
		replyInner.appendChild(label);
		
		return;
	}
	var label = document.getElementById("noReply");
	if(label !=null)
		replyInner.removeChild(label);
	var index = replyInner.children.length;
	var frag = document.createDocumentFragment();
	for(var i =0;i<data.length;i++){
		var d = data[i];
		var li = document.createElement("li");
		var img = document.createElement("img");
		var section = document.createElement("section");
		var header = document.createElement("header");
		var name = document.createElement("label");
		var time = document.createElement("label");
		var reply = document.createElement("label");
		var content = document.createElement("article");

		img.src = d.userPhoto;
		header.className = "header";
		name.innerHTML = (++index)+"楼："+d.userName;
		time.innerHTML = " 发表于 "+d.replyDate;
		reply.innerHTML = " 回复次评论";
		reply.className = "reply";
		reply.userName = d.userName;
		header.appendChild(name);
		header.appendChild(time);
		header.appendChild(reply);
		content.className = "content";
		content.innerHTML = d.userName+" ： "+d.replyContent;
		section.appendChild(content);
		section.appendChild(header);
		
		li.appendChild(img);		
		li.appendChild(section);		

		frag.appendChild(li);
		reply.onclick = function(event){
			event = event||window.event;
			var target = event.target;
			var replyContent = document.getElementById("replyContent");
			replyContent.value = "评论 "+target.userName+": " ;
			replyContent =null;
		}
	}
	replyInner.appendChild(frag);
}
function get(idName){
	return document.getElementById(idName);
}
function addReply(){
	var content = document.getElementById("replyContent").value;
	var index = content.indexOf(':');
	if(index>0){
		index = index+1;
		var target = content.slice(0,index);
		content = "<span style='color:gray'>"+target+"</span>"+content.slice(index,content.length);
	}

	if(content==""||content=="我也说一句。。。"){
		alert("先输入自己的观点！");
		return ;
	}
	var userId = window.parent.document.getElementById("userId").value;
	if(userId.value==""){
		alert("对不起你还没有登录！");
		return ;
	}
	var articleId = window.parent.document.getElementById("articleId").value;
	//登录页面后通过myajax获取进一步的信息
	var myajax = getByAjax();
	myajax.init(null,"get",true);
	myajax.get("/networkforum/article/add_article_reply.do?articleId="+articleId+"&replyContent="+encodeURIComponent(content),replyBack);
	myajax = null;
}
function replyBack(d){
	//var data = eval("("+d+")");
	document.getElementById("replyContent").value = "我再说一句。。。";
	var data = toJson(d);
	if(!data.state){
		alert(data.data);
		return;
	}
	var arr = new Array();

	arr.push(data);
	replyInfo(arr);
	window.parent.iFrameHeight("rightIframe");
}
function clearContent(){
	var replyContent = document.getElementById("replyContent");
	if(replyContent.value == "我再说一句。。。"||replyContent.value == "我也说一句。。。"){
		replyContent.value = "";
	}
}
function reloadPicture(img,url){
	if(url==null){
		return;
	}
	var path = url.substring(0,url.lastIndexOf("."))
	if(url.indexOf(".jpg")>0){
		img.src = path+".png";
	}
	else{
		img.src = path+".jpg";
	}
	img.image = url;
	img.onload = function(event){
		event = event||window.event;
		var target = event.target;
		target.src = target.image;
		target.onload = null;
		target = null;
	};
}
</script>
</head>

<body>
<section class="rightInner">
	<header class="articleTitle">
    	<h2 id="articleTitle">博客测试</h2>
        <section class="articleInfo">
        	<label id="articleGroup">分类: javaWeb</label>
            <ul class="titleNav">
            	<li id="publishTime">2013-12-12 22:56</li>
                <li id="visitTime">110人阅读</li>
                <li id="replyTime">评论(0)</li>
                <li>收藏</li>
                <li>举报</li>
            </ul>
            <div class="clear"></div>
            <section class="articleMark" id="keyWords">
                <h2 style="float:left;padding:2px 0px;margin:0;font:12px normal;height: 25px;width:60px;display: inline;">关键字:</h2> 
            </section>
        </section>
    </header>
    <hr />
    <article class="article" id="articleContent">
    测试！
    </article>
    <section class="beforeAndNext">
    	<label id="before" onclick="otherHandle(event);">上一篇： </label>    	
        <label id="next" onclick="otherHandle(event);">上一篇： </label>
    </section>
    <section class="visitor replyModule" id="visitor">
    	<h2>本文访客</h2>
   		<ul id="visitorInner">
   			
   		</ul>
    </section>
    <div style="clear: both;"></div>
    <section class="replyInfo replyModule" id="reply">
    	<h2>查看评论</h2>
    	<ul id="replyInner" class="replyInner">
    		
    	</ul>
    </section>
    <section class="replyArea replyModule">
    	<h2>发表评论</h2>
        <!-- <label id="replyUserName">用户名: 你还未登录！</label> -->
        <label>评论内容:</label>
        <textarea id="replyContent" onfocus="clearContent();" wrap="physical" cols="0" rows="0">我也说一句。。。</textarea>
        <label class="submit" onclick="addReply();">提交</label>
    </section>
</section>
</body>
<script type="text/javascript" src="/networkforum/js/myajax.js"></script>
</html>
